<template>
    <div class="relative size-full overflow-hidden">
        <el-container class="h-full">
            <!-- 头部 -->
            <el-header class="shadow" style="background: #304156">
                <div class="flex items-center gap-2 px-4">
                    <img src="/favicon.ico" class="size-6 mt-1" />
                    <span class="text-base text-white font-bold">常德市规划展示馆IMS</span>
                    <el-icon v-if="isCollapse" style="color: white;font-size: 25px;" @click="isCollapse = !isCollapse">
                        <Expand />
                    </el-icon>
                    <el-icon v-else style="color: white;font-size: 25px;" @click="isCollapse = !isCollapse">
                        <Fold />
                    </el-icon>
                </div>
                <div class="flex items-center gap-4 px-4 justify-end">
                    <span class="text-base text-white">管理员</span>
                    <div class="cursor-pointer">
                        <img src="https://img.zcool.cn/community/01ea535cd013c3a8012141686937bf.jpg@2o.jpg"
                            class="size-10 rounded-lg" />
                    </div>
                </div>
            </el-header>

            <el-container class="h-full">
                <!-- 侧边栏 -->
                <el-menu class="el-menu-vertical-demo" :collapse="isCollapse" @select="selectMenu"
                    background-color="#23303F" text-color="white">
                    <el-menu-item index="/home">
                        <el-icon>
                            <House />
                        </el-icon>
                        <template #title>首页</template>
                    </el-menu-item>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon>
                                <Folder />
                            </el-icon>
                            <span>光影常德</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/shadow">展示设置</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon>
                                <Folder />
                            </el-icon>
                            <span>沅芷澧兰</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/yzll">展示设置</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-sub-menu index="4">
                        <template #title>
                            <el-icon>
                                <Folder />
                            </el-icon>
                            <span>历代名贤</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/ldmx">展示设置</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-menu-item index="5">
                        <el-icon>
                            <Tickets />
                        </el-icon>
                        <template #title>互动大屏</template>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <el-icon>
                            <Tickets />
                        </el-icon>
                        <template
                            #title>在线答题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</template>
                    </el-menu-item>
                </el-menu>

                <!-- 主体内容 -->
                <el-main class="overflow-y-auto" style="padding: 0 0 0 0;">
                    <el-breadcrumb separator=">>" class="breadcrumb">
                        <el-breadcrumb-item v-for="name in pathNames" :key="name">{{ name }}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { ElContainer, ElHeader, ElAside, ElMain, ElTree, ElBreadcrumb, ElBreadcrumbItem, ElMenu, ElMenuItem } from 'element-plus';

const { proxy } = getCurrentInstance();
const router = useRouter();

const menuProps = ref({
    children: "children",
    label: "label",
});
const pathNames = ref(["首页"]);
const menuList = ref([
    { label: "首页", path: "/home" },
    {
        label: "光影常德",
        children: [
            {
                label: "展示设置",
                path: "/shadow",
            },
        ],
    },
    {
        label: "沅芷澧兰",
        children: [
            {
                label: "展示设置",
                path: "/yzll",
            },
        ],
    },
    {
        label: "历代名贤",
        children: [
            {
                label: "展示设置",
                path: "/ldmx",
            },
        ],
    },
    { label: "互动大屏", msg: "暂无页面" },
    { label: "在线答题", msg: "暂无页面" },
]);
const isCollapse = ref(false);

function handleNodeClick(node) {
    if (node.path) {
        router.push(node.path);
        pathNames.value = getPathNames(node.path);
    }
    if (node.msg) {
        proxy.$message.warning(node.msg);
    }
}
function getPathNames(path) {
    switch (path) {
        case "/home":
            return ["首页"];
        case "/shadow":
            return ["光影常德", "展示设置"];
        case "/yzll":
            return ["沅芷澧兰", "展示设置"];
        case "/ldmx":
            return ["历代名贤", "展示设置"];
        default:
            return [];
    }
}

function selectMenu(key) {
    if (key.indexOf("/") !== -1) {
        router.push(key);
        pathNames.value = getPathNames(key);
        return
    }
    proxy.$message.warning("暂无页面");
}

</script>

<style scoped>
:deep(.el-tree-node__content) {
    background: #23303f;
    height: 3rem;
    font-size: 1rem;
    color: white;
}

:deep(.el-tree .el-tree-node__expand-icon) {
    transform: rotate(90deg);
    font-size: 1rem;
    position: absolute;
    right: 20px;
}

:deep(.el-tree .el-tree-node__expand-icon.expanded) {
    transform: rotate(-90deg);
}

/* 点击树结构项的选中颜色 */
:deep(.el-tree-node:focus > .el-tree-node__content) {
    background-color: #2d3d51;
    color: #409eff;
    font-weight: bold;
    transition: 0.2s;
}

:deep(.el-tree-node__expand-icon) {
    float: right;
    opacity: 1;
}

/* 使头部内容垂直居中 */
.el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 使头部内的每个 div 都能垂直居中 */
.el-header>div {
    display: flex;
    align-items: center;
}

/* 确保管理员信息靠右对齐 */
.el-header .justify-end {
    justify-content: flex-end;
}

.breadcrumb {
    padding: 20px 0 20px 32px;
    border-bottom: 5px solid #F2F2F2;
}
</style>